<template>
    <el-dialog
            :visible.sync="visible"
            width="450px"
            :title="title"
            custom-class="zcgl-ftgl-tz-add-fx-wrap">
        <el-form :ref="editFormRef" :model="formData" label-width="95px" :rules="rules" @submit.native.prevent>
            <el-form-item label="费项类型" prop="type">
                <el-select v-model="formData.type" placeholder="请选择费项类型" style="width: 100%;">
                    <el-option label="收入" value="in"/>
                    <el-option label="支出" value="out"/>
                </el-select>
            </el-form-item>

            <el-form-item label="选择费项" prop="name">
                <el-select v-model="formData.name" placeholder="请选择费项" style="width: 100%;">
                    <el-option label="费项1" value="费项1"/>
                    <el-option label="费项2" value="费项2"/>
                </el-select>
            </el-form-item>

            <el-form-item label="费项周期" prop="fxzq">
                <div>
                    <el-date-picker
                            style="width: 100%;"
                            v-model="formData.fxzq"
                            type="daterange"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                            format="yyyy-MM-dd"
                            value-format="yyyy-MM-dd">
                        <span slot="range-separator">{{fxDays}}</span>
                    </el-date-picker>
                </div>
            </el-form-item>

            <el-form-item label="计算增值税" prop="jszzs">
                <el-radio-group v-model="formData.jszzs">
                    <el-radio label="1" border>是</el-radio>
                    <el-radio label="0" border>否</el-radio>
                </el-radio-group>
            </el-form-item>

            <el-form-item label="计税方式" prop="jsz" v-if="formData.jszzs === '1'">
                <el-input placeholder="请输入内容" v-model="formData.jsz">
                    <el-select v-model="formData.jsfs" slot="prepend" placeholder="计税方式 "style="width: 100px;">
                        <el-option label="一般计税" value="yb"/>
                        <el-option label="简易计税" value="jy"/>
                    </el-select>
                    <template slot="append">%</template>
                </el-input>
            </el-form-item>

            <el-form-item label="交费期限" prop="jfqx">
                <el-date-picker v-model="formData.jfqx" placeholder="请选择交费期限" style="width: 100%;" format="yyyy-MM-dd" value-format="yyyy-MM-dd"/>
            </el-form-item>

            <el-form-item label="费项本金" prop="ys">
                <el-input v-model="formData.ys" placeholder="请输入费项本金"/>
            </el-form-item>

            <el-form-item label="说明" prop="remark">
                <el-input v-model="formData.remark" placeholder="请输入说明" type="textarea" :rows="3" resize="none"/>
            </el-form-item>
        </el-form>

        <span slot="footer">
            <el-button type="success" class="button-wide" @click="handleSubmit">确定</el-button>
            <el-button type="info" class="button-wide" @click="dialogCloseHandler">取消</el-button>
        </span>
    </el-dialog>
</template>

<script>
    export default JBoot({
        props: {},

        data() {
            return {
                rules: {
                    type: [{required: true, message: '请选择缴费类型'}],
                    fx: [{required: true, message: '请选择费项'}],
                    fxzq: [{required: true, message: '请选择费项周期'}],
                    jszzs: [{required: true, message: '请选择是否计算增值税'}],
                    jfqx: [{required: true, message: '请选择交费期限'}],
                    ys: [{required: true, message: '请输入交费本金'}],
                    remark: [{min: 0, max: 255, message: '说明最多输入255个字符'}],
                    jsz: [{required: true, message: '请输入计税方式'}]
                }
            }
        },

        computed: {
            fxDays (){
                let fxzq = this.formData.fxzq || [];

                return '- ' + this.calcDaysByDateRange(fxzq[0], fxzq[1]) + '天 -';
            }
        },

        methods: {
            initFormDataInfo (){
                let param = this.parentParam.form || {},
                    fxzq = [];

                if(param.fxStartDate && param.fxEndDate){
                    fxzq.push(param.fxStartDate, param.fxEndDate);
                }

                this.$set(this, 'formData', Object.assign({}, param, {
                    type: param.type || 'in',
                    jszzs: param.jszzs || '0',
                    fxzq
                }));
            },

            handleSubmit (){
                this.getFormInstance().validate(valid => {
                    let formData = this.formData,
                        fxzq = formData.fxzq || [],
                        response = Object.assign({}, formData, {
                            fxStartDate: fxzq[0],
                            fxEndDate: fxzq[1]
                        });

                    delete response.fxzq;

                    valid && this.parentParam.callback && this.parentParam.callback(response);

                    this.dialogCloseHandler();
                });
            }
        },

        watch: {
            'formData.jszzs': {
                immediate: true,
                handler (v){
                    this.$set(this.formData, 'jsz', undefined);

                    if(v === '1'){
                        this.$set(this.formData, 'jsfs', 'yb');
                    }else{
                        this.$set(this.formData, 'jsfs', undefined);
                    }
                }
            }
        }
    }).form().build();
</script>

<style lang="scss">
    .zcgl-ftgl-tz-add-fx-wrap {
        & .el-date-editor--daterange{
            & > .el-range-input{
                width: 70px !important;
            }
            & > span{
                display: inline-block;
                width: 120px;
                text-align: center;
                line-height: 1;
                font-size: 12px;
            }
        }
    }
</style>
